<template>
<div id="building">


<el-container >
  <el-header id="head" >
<!-- 分栏 -->

  <el-row :gutter="0">
    <el-col :span="2"><div class="block1">
       <img id="logo" src="~@/assets/logo.jpg">
        <b>墨书</b>
    </div></el-col>

    <el-col :span="2"><div class="block2">


      <el-dropdown>
  <span class="el-dropdown-link">
    产品特色
    <i class="el-icon-arrow-down el-icon--right"></i>
    </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item >高效快捷的团队管理</el-dropdown-item>
    <el-dropdown-item>简单高效的设计原型</el-dropdown-item>
    <el-dropdown-item>实用美观的设计模板</el-dropdown-item>
    <el-dropdown-item>容易上手的用户体验</el-dropdown-item>
  </el-dropdown-menu>
  </el-dropdown>




       
    </div></el-col>

    <el-col :span="2"><div class="block">

      <el-popover
      placement="top-start"
      title=""
      width="40"
      trigger="hover"
      content="图形设计&文档编辑&UML设计">
      <div slot="reference"  class="price">主要功能</div>
      </el-popover>
        
    </div ></el-col>


    <el-col :span="2"><div class="block">

    <el-popover
    placement="top-start"
    title=""
    width="200"
    trigger="hover"
    content="每个人都可以免费使用完整版。">
    <div slot="reference"  class="price">价格</div>
   </el-popover>


  
    </div></el-col>

     <el-col :span="2"><div class="block">

    <el-popover
    placement="top-start"
    title=""
    width="300"
    trigger="hover"
    content="我们是一个六人的小团队">
    <div slot="reference"  class="price">关于我们</div>

   </el-popover>

    </div></el-col>

     <el-col :span="3"><div class="block">
      <!-- 对话框实现 -->
     
    <el-popover
    placement="top-start"
    title=""
    width="200"
    trigger="hover"
    content="不需要帮助就能轻松上手使用">
    <div slot="reference"  class="price">帮助中心</div>
   </el-popover>
    </div></el-col>

    <el-col :span="2"><div class="block">
     
    </div></el-col>
    <!-- 站位空 -->
    <el-col :span="3"><div class="block">

    </div></el-col>



    <el-col :span="3"><div class="block">
        <el-button  @click="jumpToLogin"  type="info" plain id="button1" >免费使用</el-button>
    </div></el-col>

    <el-col :span="2"><div class="block" @click="jumpToLogin">
        登录/注册
    </div></el-col>

  </el-row>


     
    
  </el-header>
  <el-main id="body">
    <br>
    <br>
    <br>
    <br>
    <div id="line1"><b>产品协作设计 更快更简单</b></div>
    <div id="line2">更好的产品设计协作平台,设计师的利器,产品经理的帮手,工程师的伙伴</div>
     <br>
    <br>
    <el-button type="primary" @click="jumpToLogin" id="use" >免费使用</el-button>
    <br>
    <br>
    <div id="line3">加入百万墨书用户，开启高效协作设计</div>
    
  </el-main>




</el-container>





</div>
</template>



<script>
export default{
   data() {
      return {
        dialogVisible: false,
         visible: false
      };
    },
  methods:{

    jumpToLogin(){
      window.open("http://39.105.133.20:8090/login")
    },
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  
}


</script>



<style scoped>

#building{
background:url("~@/assets/mainbg.jpg");
width:100%;		
height:100%;		
position:fixed;
background-size:100% 100%;}


#head{
    
    color: white;
    /* 上半部分的颜色 */
    background-color:black;
    padding: 20px ;
    /* 整个标签透明 opacity:0 */
    
}


#body{
  background-color: transparent;
  color: white;
  height: 100%;
  width: 100%;
  
}

#logo{
    height: 30px;
    float: left;


    
  
}


/* 控制整行 */
.el-row {
    
    margin-bottom: 0px;
    margin: 0px 0px 0px 0px;
    height: 20px;
   
  }
/* 控制每个块 */
  .el-col {
    border-radius: 4px;
    background-color:transparent;
    /* 左右居中 */
    text-align: center;
    /* 不能用padding 会遮盖住main！ */
    height: 30px;
   
    
  }



/* block1 */
.block1{
  text-align: left;
  /* 字体大小 */
  font-size: 30px;
  line-height: 30px;
  
  size: 100%;
  
}



#line1{
 
  font-size: 40px;
  text-align: center;
}

#line2{
  
  font-size: 20px;
  text-align: center;
}
#line3{
  
  font-size: 18px;
  text-align: center;
}

#button1{
  color: black;
  padding-top: 0px;
  padding-bottom: 5px;
  width: 100px;

}

#use{
  
  height: 50px;
  width: 150px;
  font-size: large;
  margin-left: 0px;
}


.jump:hover{
   color: dodgerblue;
  font-size: large;
  /* 鼠标样式 */
  cursor: pointer;
 
}

.el-dropdown-link {
    cursor: pointer;
    color: white;
    font-size: 16px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }

.block:hover
{
  color: dodgerblue;
  font-size: large;
  /* 鼠标样式 */
  cursor: pointer;
}
  
 
  
</style>